{*
SPDX-FileCopyrightText: © 2021 Olivier Meunier <olivier@neokraft.net>

SPDX-License-Identifier: AGPL-3.0-only
*}
{{- block icon(name, class="svgicon", svgClass="w-4 h-4", viewBox="0 0 100 100", attrs=attrList()) -}}
<span class="{{ class }}" {{ attrs }}><svg xmlns="http://www.w3.org/2000/svg"
viewbox="{{ viewBox }}" class="inline-block {{ svgClass }}"><use
href="{{ assetURL(`img/icons.svg`) }}#{{ name }}"></use></svg></span>
{{- end -}}

{{- block csrfField() -}}
<span class="hidden"><input type="hidden" name="{{ csrfName }}" value="{{ csrfToken }}"></span>
{{- end -}}

{{- block message(type="info", removable=false, delay=0) -}}
{{- icon := "o-info" -}}
{{- color := "text-blue-800" -}}
{{- bg := "bg-blue-50" -}}
{{- border := "border-blue-800" -}}
{{- bg_from := "from-blue-700" -}}
{{- bg_via := "via-blue-50" -}}
{{- if type == "success" -}}
  {{- icon = "o-check-on" -}}
  {{- color = "text-green-800" -}}
  {{- bg = "bg-green-100" -}}
  {{- border = "border-green-800" -}}
  {{- bg_from = "from-green-700" -}}
  {{- bg_via = "via-green-100" -}}
{{- else if type == "error" -}}
  {{- icon = "o-error" -}}
  {{- color = "text-red-800" -}}
  {{- bg = "bg-red-100" -}}
  {{- border = "border-red-800" -}}
  {{- bg_from = "from-red-700" -}}
  {{- bg_via = "via-red-100" -}}
{{- end -}}
<div class="
  group flex gap-2 p-4 overflow-hidden items-baseline
  {{ bg }} rounded my-6 w-full border {{ border }}
  bg-gradient-to-r from-[0.25rem] via-[0.25rem] {{ bg_from }} {{ bg_via }}
  transition-all duration-300 ease-in-out"
 {{- if removable || delay > 0 -}} data-controller="remover" {{- end -}} data-remover-delay-value="{{ delay }}"
>
  <div>
    {{- yield icon(name=icon, class="svgicon " + color) -}}
  </div>
  <div class="flex-grow">
    {{- yield content -}}
  </div>
  {{- if removable -}}
    <div class="-mt-2 -mr-2">
      <button data-action="remover#remove">
        {{ yield icon(name="o-cross", class="text-gray-300 group-hf:text-red-700", svgClass="h-5 w-5") }}
      </button>
    </div>
  {{- end -}}
</div>
{{- end -}}

{{- block flashes() -}}
{{- if len(flashes) > 0 -}}
  <div class="js:absolute js:top-2 js:z-50 w-full max-w-xl">
  {{- range flashes -}}
      {{- if !hasPrefix(.Type, "_") -}}
        <div class="drop-shadow-sm mb-1">
          {{- yield message(type=.Type, delay=3) content -}}
            <strong>{{ .Message }}</strong>
          {{- end -}}
        </div>
      {{- end -}}
  {{- end -}}
  </div>
{{- end -}}
{{- end -}}

{{- block spinner() -}}
{{ yield icon(name="o-spinner", svgClass="animate-spin stroke-current")}}
{{- end -}}

{{- block quickAccessMenu(items=slice()) -}}
{{- if items -}}
<ul label="Quick access menu"
 class="a11y-nav">
  {{- range items -}}
    <li><a href="#{{ .[0] }}" class="link">{{ .[1] }}</a></li>
  {{- end -}}
</ul>
{{- end -}}
{{- end -}}

{{- block mainMenuItem(name, path, icon, current=false) -}}
<li><a href="{{ urlFor(path) }}" data-current="{{ current }}">{{ yield icon(name=icon) }}
<span class="sr-only">{{ name }}</span></a></li>
{{- end -}}

{{- block sideMenuTitle() -}}
<h2 id="sidemenu-title"
  class="h-topnav border-b border-gray-200 uppercase flex items-center justify-center"
>{{- yield content -}}</h2>
{{- end -}}

{{- block sideMenuItem(name, path, icon, current=false) -}}
<li><a href="{{ urlFor(path) }}" data-current="{{ current }}">{{ yield icon(name=icon) }}
{{ name }}</a></li>
{{- end -}}
